<template>
  <cell-wrapper
    v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
    :key="wrapperType"
    :wrapper-type="wrapperType"
    :style="{ backgroundColor: contentStyle.backgroundColor }"
  >
    <text-display-cell
      v-if="!editState"
      :text="value"
      :columnConfig="columnsConfig"
      v-bind="contentStyle"
    />
    <a-input v-else :value="formatText(value)" @change="handleValueChange" />
  </cell-wrapper>
</template>

<script>
  import { computed, defineComponent } from 'vue';
  import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue';
  import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
  import { generateContentStyle, judgeCellEditable } from '@/utils/index';

  export default defineComponent({
    name: 'TextTableCell',
    components: {
      TextDisplayCell,
      CellWrapper,
    },
    inheritAttrs: false,
    props: {
      // 当前单元格的值
      value: {
        type: [String, Number, Boolean, Array],
        default: () => {
          return null;
        },
      },
      // 单元格的默认样式
      defaultStyle: {
        type: Object,
        default: () => ({}),
      },
      // 单元格的条件样式配置
      conditionStyle: {
        type: Array,
        default: () => {
          return [];
        },
      },
      // 当前行的数据
      rowData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
      conditionValueMap: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前列的配置
      columnsConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前单元格是否处于编辑状态
      isEdit: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
    },
    emits: ['change'],
    setup(props, { emit }) {
      const formatText = (text) => {
        if (!text) {
          return '';
        }
        let html = [];
        if (text && Array.isArray(text) && text[0]) {
          text.forEach((item) => {
            if (item !== null && item !== undefined) {
              html.push(item.title ?? item.label ?? item.name ?? '');
            }
          });
        }
        if (html.length > 0) {
          return html.join(',');
        }
        return text;
      };
      const editState = computed(() => {
        return (
          props.isEdit &&
          judgeCellEditable(props.columnsConfig, props.rowData, props.conditionValueMap)
        );
      });
      // 内容显示的样式
      const contentStyle = computed(() => {
        return generateContentStyle(
          props.columnsConfig.contentConfig,
          props.rowData,
          props.conditionValueMap,
        );
      });

      function handleValueChange(event) {
        emit('change', event.target.value);
      }
      return {
        editState,
        contentStyle,
        handleValueChange,
        formatText,
      };
    },
  });
</script>
